<template>
    <div class="warn-stra-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <div class="breadcrumb-content">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>
              <i class="el-icon-info"></i>
              可以在线 > 参数配置 > License系统监控设备对当前License系列的使用状况。
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="breadcrumb-actions">
          <el-button type="primary" size="small" @click="handleFilter">过滤</el-button>
          <el-button size="small" @click="handleSelected">已选择</el-button>
        </div>
      </div>
  
      <div class="main-wrapper">
        <!-- 左侧菜单 -->
        <div class="side-menu">
          <!-- 搜索 -->
          <div class="search-box">
            <el-select v-model="scopeValue" placeholder="全部" size="small" class="scope-select">
              <el-option label="全部" value="all"></el-option>
              <el-option label="告警" value="warning"></el-option>
              <el-option label="正常" value="normal"></el-option>
            </el-select>
            <el-input
              placeholder="请输入关键字"
              v-model="searchKeyword"
              size="small"
              class="search-input"
              @input="handleSearch"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
  
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            background-color="#f5f7fa"
            text-color="#333"
            active-text-color="#409EFF"
          >
            <el-menu-item index="1" class="menu-item-with-badge" @click="handleMenuClick('1')">
              <i class="el-icon-monitor"></i>
              <span>全部设备</span>
              <el-badge :value="tableData.length" class="menu-badge" type="info"/>
            </el-menu-item>
  
            <el-menu-item index="2" class="menu-item-with-badge" @click="handleMenuClick('2')">
              <i class="el-icon-circle-plus"></i>
              <span>未加入站点</span>
              <el-badge :value="0" class="menu-badge" type="info"/>
            </el-menu-item>
  
            <el-menu-item index="3" class="menu-item-with-badge" @click="handleMenuClick('3')">
              <i class="el-icon-office-building"></i>
              <span>已加入站点</span>
              <el-badge :value="8" class="menu-badge" type="info"/>
            </el-menu-item>
  
            <el-menu-item index="4" class="menu-item-with-badge site-item" @click="handleMenuClick('4')">
              <i class="el-icon-location-outline"></i>
              <span>Site_Store</span>
              <el-badge :value="1" class="menu-badge" type="warning"/>
            </el-menu-item>
  
            <el-menu-item index="5" class="menu-item-with-badge site-item" @click="handleMenuClick('5')">
              <i class="el-icon-location-outline"></i>
              <span>Site_Y</span>
              <el-badge :value="7" class="menu-badge" type="warning"/>
            </el-menu-item>
          </el-menu>
        </div>
  
        <!-- 主内容区域 -->
        <div class="main-content">
          <!-- 操作按钮 -->
          <div class="operation-buttons">
            <el-button size="small" @click="handleBatchOperation">更多操作</el-button>
            <el-button size="small" @click="handleExport">导出</el-button>
            <el-button size="small" @click="handleDeleteSite">删除站点</el-button>
            <el-button size="small" @click="handleDeleteDevice">删除设备</el-button>
            <el-button type="primary" size="small" @click="handleAddDevice">添加设备</el-button>
          </div>
  
          <!-- 设备列表 -->
          <div class="device-list">
            <el-table
              ref="deviceTable"
              :data="tableData"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="name" label="名称">
                <template #default="scope">
                  <div class="device-item">
                    <el-tooltip class="item" effect="dark" :content="getStatusText(scope.row.status)" placement="right">
                      <i :class="getStatusIcon(scope.row.status)"></i>
                    </el-tooltip>
                    <span>{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="esn" label="ESN"></el-table-column>
              <el-table-column prop="type" label="角色"></el-table-column>
              <el-table-column prop="site" label="站点"></el-table-column>
              <el-table-column prop="model" label="设备型号"></el-table-column>
              <el-table-column prop="status" label="状态"></el-table-column>
              <el-table-column prop="managementStatus" label="管理状态"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'WarnStra',
    data() {
      return {
        scopeValue: 'all',
        searchKeyword: '',
        activeMenu: '1',
        selectedDevices: [],
        tableData: [
        { name: '接入_Site_Y_1000', esn: 'ESN1000', type: '接入', model: 'S3250', status: '正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '接入_Site_Y_1001', esn: 'ESN1001', type: '接入', model: 'AR1220', status: '不正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '接入_Site_Y_1002', esn: 'ESN1002', type: '接入', model: 'AR1220', status: '正常', managementStatus: '不正常', site: 'Site_Y' },
        { name: '接入_Site_Y_1003', esn: 'ESN1003', type: '接入', model: 'ISR4331', status: '正常', managementStatus: '不正常', site: 'Site_Y' },
        { name: '汇聚_Site_Y_1004', esn: 'ESN1004', type: '汇聚', model: 'S6720', status: '正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '汇聚_Site_Y_1005', esn: 'ESN1005', type: '汇聚', model: 'S6720', status: '正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '汇聚_Site_Y_1006', esn: 'ESN1006', type: '汇聚', model: 'C3850', status: '正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '核心_Site_Y_1007', esn: 'ESN1007', type: '核心', model: 'N93180', status: '不正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '核心_Site_Y_1008', esn: 'ESN1008', type: '核心', model: 'N93180', status: '不正常', managementStatus: '不正常', site: 'Site_Y' },
        { name: '存储_Site_Y_1009', esn: 'ESN1009', type: '存储', model: 'OS5300', status: '不正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '存储_Site_Y_1010', esn: 'ESN1010', type: '存储', model: 'VNX5200', status: '不正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '存储_Site_Y_1011', esn: 'ESN1011', type: '存储', model: 'OS5300', status: '正常', managementStatus: '不正常', site: 'Site_Y' },
        { name: '服务器_Site_Y_1012', esn: 'ESN1012', type: '服务器', model: 'FS2288H', status: '不正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '服务器_Site_Y_1013', esn: 'ESN1013', type: '服务器', model: 'R740', status: '正常', managementStatus: '正常', site: 'Site_Y' },
        { name: '服务器_Site_Y_1014', esn: 'ESN1014', type: '服务器', model: 'FS2288H', status: '不正常', managementStatus: '不正常', site: 'Site_Y' },
        { name: '服务器_Site_Y_1015', esn: 'ESN1015', type: '服务器', model: 'LSR650', status: '不正常', managementStatus: '不正常', site: 'Site_Y' },
        { name: '接入_Site_Store_1016', esn: 'ESN1016', type: '接入', model: 'SRG3250', status: '正常', managementStatus: '不正常', site: 'Site_Store' },
        { name: '接入_Site_Store_1017', esn: 'ESN1017', type: '接入', model: 'ISR4331', status: '正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '接入_Site_Store_1018', esn: 'ESN1018', type: '接入', model: 'AR1220', status: '正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '接入_Site_Store_1019', esn: 'ESN1019', type: '接入', model: 'AR1220', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '汇聚_Site_Store_1020', esn: 'ESN1020', type: '汇聚', model: 'S6720', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '汇聚_Site_Store_1021', esn: 'ESN1021', type: '汇聚', model: 'C3850', status: '正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '汇聚_Site_Store_1022', esn: 'ESN1022', type: '汇聚', model: 'S5735', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '汇聚_Site_Store_1023', esn: 'ESN1023', type: '汇聚', model: 'S6720', status: '不正常', managementStatus: '不正常', site: 'Site_Store' },
        { name: '核心_Site_Store_1024', esn: 'ESN1024', type: '核心', model: 'N93180', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '核心_Site_Store_1025', esn: 'ESN1025', type: '核心', model: 'CE12800', status: '正常', managementStatus: '不正常', site: 'Site_Store' },
        { name: '核心_Site_Store_1026', esn: 'ESN1026', type: '核心', model: 'CE6855', status: '正常', managementStatus: '不正常', site: 'Site_Store' },
        { name: '核心_Site_Store_1027', esn: 'ESN1027', type: '核心', model: 'CE6855', status: '不正常', managementStatus: '不正常', site: 'Site_Store' },
        { name: '存储_Site_Store_1028', esn: 'ESN1028', type: '存储', model: 'OS 5300', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '存储_Site_Store_1029', esn: 'ESN1029', type: '存储', model: 'VNX5200', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '存储_Site_Store_1030', esn: 'ESN1030', type: '存储', model: 'OS 5300', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '服务器_Site_Store_1031', esn: 'ESN1031', type: '服务器', model: 'FS 2288H', status: '不正常', managementStatus: '不正常', site: 'Site_Store' },
        { name: '服务器_Site_Store_1032', esn: 'ESN1032', type: '服务器', model: 'FS 2288H', status: '正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '服务器_Site_Store_1033', esn: 'ESN1033', type: '服务器', model: 'R740', status: '不正常', managementStatus: '正常', site: 'Site_Store' },
        { name: '服务器_Site_Store_1034', esn: 'ESN1034', type: '服务器', model: 'FS 2288H', status: '不正常', managementStatus: '正常', site: 'Site_Store' }
        ]
      };
    },
    methods: {
      handleFilter() {
        console.log('过滤功能');
      },
      handleSelected() {
        console.log('已选择功能');
      },
      handleSearch() {
        console.log('搜索关键字:', this.searchKeyword);
      },
      handleMenuClick(index) {
        this.activeMenu = index;
        console.log('菜单点击:', index);
      },
      getStatusIcon(status) {
        const statusMap = {
          normal: 'el-icon-success',
          warning: 'el-icon-warning',
          error: 'el-icon-error'
        };
        return statusMap[status] || 'el-icon-info';
      },
      getStatusText(status) {
        const statusMap = {
          normal: '正常',
          warning: '告警',
          error: '错误'
        };
        return statusMap[status] || '未知状态';
      },
      handleSelectionChange(val) {
        this.selectedDevices = val;
        console.log('选中的设备:', this.selectedDevices);
      },
      handleBatchOperation() {
        console.log('批量操作:', this.selectedDevices);
      },
      handleExport() {
        console.log('导出:', this.selectedDevices);
      },
      handleDeleteSite() {
        console.log('删除站点:', this.selectedDevices);
      },
      handleDeleteDevice() {
        console.log('删除设备:', this.selectedDevices);
      },
      handleAddDevice() {
        console.log('添加设备');
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .warn-stra-container {
    display: flex;
    flex-direction: column;
    // height: 100vh;
    background-color: #f0f2f5;
  
    .breadcrumb {
      padding: 8px 16px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      .breadcrumb-content {
        display: flex;
        align-items: center;
  
        ::v-deep .el-breadcrumb {
          font-size: 12px;
          line-height: 1.5;
  
          .el-breadcrumb__item {
            .el-breadcrumb__inner {
              color: #666;
              font-weight: normal;
  
              .el-icon-info {
                color: #1890ff;
                margin-right: 8px;
              }
            }
          }
        }
      }
  
      .breadcrumb-actions {
        display: flex;
        gap: 8px;
  
        .el-button {
          padding: 5px 12px;
          height: 28px;
          line-height: 16px;
        }
      }
    }
  
    .main-wrapper {
      flex: 1;
      display: flex;
  
      .side-menu {
        width: 260px;
        background-color: #f5f7fa;
        border-right: 1px solid #e6e6e6;
        
        .search-box {
          padding: 16px;
          display: flex;
          gap: 8px;
  
          .scope-select {
            width: 80px;
          }
  
          .search-input {
            flex: 1;
          }
        }
  
        .el-menu {
          border-right: none;
          background-color: transparent;
  
          .menu-item-with-badge {
            display: flex;
            align-items: center;
            padding-left: 20px !important;
            height: 40px;
            line-height: 40px;
  
            &.site-item {
              padding-left: 34px !important;
            }
  
            .menu-badge {
              margin-left: auto;
              margin-right: 16px;
            }
  
            &:hover {
              background-color: #e6f7ff;
            }
  
            &.is-active {
              background-color: #e6f7ff;
              color: #1890ff;
              border-right: 2px solid #1890ff;
            }
          }
        }
      }
  
      .main-content {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
  
        .operation-buttons {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 16px;
          gap: 8px;
        }
  
        .device-list {
          background: #fff;
          padding: 20px;
          border-radius: 4px;
  
          .device-item {
            display: flex;
            align-items: center;
            gap: 8px;
          }
  
          .el-tooltip {
            color: #409EFF;
            font-size: 18px;
          }
        }
      }
    }
  }
  
  ::v-deep {
    .el-table {
      th {
        background-color: #fafafa;
        color: rgba(0, 0, 0, 0.85);
      }
      td {
        padding: 8px 0;
      }
    }
  
    .el-input__inner {
      border-radius: 2px;
    }
    
    .el-button {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
  </style>
